import Vue from 'vue'
import Component from 'vue-class-component'
import '../settingStyle.css'
import { Indicator } from 'mint-ui'
import {Toast} from 'mint-ui'
import {readFile, uploadImages} from '@/utils/uploadImage/index'
import Platform from '@/supports/platform'

@Component
export default class UserInfoEditClass extends Vue {
  headPic = ''
  shopName = ''
  shopDec = ''
  wxCode = ''
  wxCodePic = ''
  popupWxCodePic = false
  isCover = false
  userInfo = {}

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 64
    const userString = sessionStorage.getItem('user')
    let self = this
    if (!this.userString || this.userString.length <= 0) {
      Platform.getValueFromKey('userInfo') //
      eventBus.$on('userInfo', function(val) {
        self.userString = val

        self.userInfo = JSON.parse(self.userString)
        self.$store.commit('updateUser', self.userInfo)
        self.$store.commit('setUid', self.userInfo.uid)

        self.headPic = self.userInfo.shopHeadPic
        self.shopName = self.userInfo.shopName ? self.userInfo.shopName : ''
        self.shopDec = self.userInfo.shopDec ? self.userInfo.shopDec : ''
        self.wxCode = self.userInfo.shopWechat ? self.userInfo.shopWechat : ''
        self.wxCodePic = self.userInfo.shopQr ? self.userInfo.shopQr : ''
      })
    } else {
      this.userInfo = JSON.parse(this.userString)
      this.headPic = this.userInfo.shopHeadPic
      this.shopName = this.userInfo.shopName ? this.userInfo.shopName : ''
      this.shopDec = this.userInfo.shopDec ? this.userInfo.shopDec : ''
      this.wxCode = this.userInfo.shopWechat ? this.userInfo.shopWechat : ''
      this.wxCodePic = this.userInfo.shopQr ? this.userInfo.shopQr : ''
    }

    eventBus.$on('userInfoEdit', this.handleEditInfoLoadImage)
  }

  handlePop() {
    this.$router.go(-1)
  }

  handlePopupWxCodePic () {
    this.popupWxCodePic = true
  }

  handleFiles(e) {
    // this.isCover = false
    this.type = e.target.id
    // console.log(e)
    // let y = 0
    Platform.choosePhotos('1', 'userInfoEdit')
    // let self = this
  }

  // handleHeadFiles(e) {
  //   // this.isCover = true
  //   this.type = e.target.id
  //   // console.log(e)
  //   // let x = e.clientY
  //   Platform.choosePhotos('1')

  // }

  handleEditInfoLoadImage(images) {
    if (this.type === 'fileHead') {
      this.headPic = images[0] ? images[0] : ''
    } else {
      this.wxCodePic = images[0] ? images[0] : ''
    }
  }

  async handleuserInfoSave() {
    let params = {
      cover: this.headPic,
      description: this.shopDec,
      name: this.shopName,
      wechat: this.wxCode,
      qr: this.wxCodePic
    }
    try {
      const response = await this.$axios.post('/user/v1/shop/modify', params)
      if (response.status === 0) {
        let userInfo = {
          shopHeadPic: this.headPic,
          shopName: this.shopName,
          shopDec: this.shopDec,
          shopWechat: this.wxCode,
          shopQr: this.wxCodePic
        }

        if (this.headPic && this.headPic.length > 0) {
          this.userInfo.shopHeadPic = this.headPic
        }

        if (this.shopName && this.shopName.length > 0) {
          this.userInfo.shopName = this.shopName
        }

        if (this.shopDec && this.shopDec.length > 0) {
          this.userInfo.shopDec = this.shopDec
        }

        if (this.wxCode && this.wxCode.length > 0) {
          this.userInfo.shopWechat = this.wxCode
        }

        if (this.wxCodePic && this.wxCodePic.length > 0) {
          this.userInfo.shopQr = this.wxCodePic
        }

        console.log('user', this.userInfo)

        this.$store.commit('upDateUser', this.userInfo)
        this.$store.commit('setUid', this.userInfo.uid)
        sessionStorage.setItem('user', JSON.stringify(this.userInfo))
        Platform.saveValueForKey({'userInfo': this.userInfo})

        // sessionStorage.setItem('user', JSON.stringify(userInfo))

        Toast('保存成功！')
        let self = this
        setTimeout(function() {
          self.$router.go(-1)
        }, 1000)
      }
    } catch (e) {
      console.log(e)
    }
  }

  render () {
    return (
      <div>
        <mt-header class='header' fixed title="店铺资料">
          <mt-button onClick={this.handlePop} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>
        <div class="userInfoClass" style={this.caculateHeight + ';margin-top:64px'}>
          <div>
            <mt-cell title="头像" is-link>
              <p id='fileHead' class="fileUserPic" onClick={this.handleFiles} >
              </p>
              <span id='fileHead' class="headerPic">
                <img id='fileHead' v-show={this.headPic} src={this.headPic}/>
              </span>
            </mt-cell>
          </div>
          <div><mt-field class='addImageLine' label="店铺名称" placeholder="请输入店铺名称" v-model={this.shopName}></mt-field></div>
          <div><mt-field label="店铺描述" placeholder="请输入店铺描述" type="textarea" rows="2" v-model={this.shopDec}></mt-field></div>
          <div><mt-field class='addImageLine' label="微信号" placeholder="请输入微信号" v-model={this.wxCode}></mt-field></div>
          <mt-cell title="二维码" class="wxCode" is-link>
            <p class="fileUserPic" onClick={this.handleFiles} ></p>
            <span id='fileCodePic' onClick={this.handlePopupWxCodePic} style="z-index:999">
              <icon id='fileCodePic' name = 'wxCode' scale='4'/>
            </span>
          </mt-cell>

          <mt-button onClick={this.handleuserInfoSave} style='margin:30px 10%;width:80%' type="danger" size='large'>保存</mt-button>

          <mt-popup
              v-model={this.popupWxCodePic}
              position="right">
            <div class="popupWxcodepic">
              <img v-show={this.wxCodePic} src={this.wxCodePic}/>
              <div class="noWxCode" v-show={!this.wxCodePic}><icon name = 'wxCode' scale='12'/><p>请上传微信二维码</p></div>
            </div>
          </mt-popup>

        </div>
      </div>
    )
  }
}
